<template>
  <div class="g-home-wrap">
    <section class="form-box">
      <p class="g-border" >
        <span>来源name</span>
        <input type="text" v-model="scene">
      </p>
      <p class="btn-box">
        <button class="button" :class="{'on':btnText=='txuedai'}" @click="btnFn('txuedai')">测试环境</button>
        <button class="button" :class="{'on':btnText=='xuedai'}"  @click="btnFn('xuedai')">生产环境</button>
      </p>
    </section>
    <section class="g-btn-box">
      <button @click="lasting">生成二维码</button>
    </section>
    <div v-if="imgURl" class="img-box">
      <img :src="imgURl" alt=""> 
    </div>
    <section class="g-btn-box">
      <button @click="downs">下载二维码</button>
    </section>
  </div>
</template>
<script>
import api from '$api';
export default {
  name: '',
  data() {
    return {
      async : false,
      scene :'jiatui',
      imgURl :'',
      btnText:'txuedai'
    }
  },
  methods: {
    //获取订单详情
    lasting () {
      api.lasting({scene:this.scene},this.btnText).then((res)=>{
        if(res.respCode == '000'){
          this.imgURl  = res.backUrl;
          this.async  = true;
        } else {
          alert(res.respMesg)
        }
      })
    },
    downs() {
      if(!this.imgURl){
        alert('二维码没有值');
        return false
      };
      var alink = document.createElement("a");
      alink.href = this.imgURl;
      alink.download = "pic"; //图片名
      alink.click();
    },  
    btnFn (name) {
      this.btnText =name;
      this.imgURl = '';
    }
  }
}
</script>
<style lang="scss" scoped>
.g-home-wrap {
  padding:0 15px 0;
  max-width: 500px;
  margin:100px auto;
  background: #fff;
  padding-bottom: 30px;
  section{
    padding-top: 20px;
  }
  .img-box{
    img{
      display: block;
      margin:0 auto;
      width: 80%;
    }
  }
  
  .form-box{
    p{
      height: 50px;
      display: flex;
      align-items: center;
      span{
        width: 120px;
      }
      input{
        height: 100%;
        flex:1;
        border:0;
        text-align: right;
      }
      .button{
        background: #f0f0f0;
        display: block;
        flex:1;
        border:none;
        margin:0 10px;
        height: 100%;
        border-radius: 4px;
        &.on{
          background: $col-blue;
          color:#fff;
        }
      }
    }
    .btn-box{
      padding-top:20px;
      height: 70px;
    }
  }
}


  
</style>
